import React, { Component, Fragment } from "react";
// 
import { Link } from "react-router-dom";
import { CopyOutlined } from "@ant-design/icons";
import { CopyToClipboard } from 'react-copy-to-clipboard';
// antd
import { Tag } from "antd";
import Action from "@c/buttonAction/Index";
// table 组件
import TableComponent from "@c/tableData/Index";


class AliyunSlb extends Component {
    constructor(props){
        super(props);
        this.state = {
            // id
            id: "",
            hover: false,
            // 表头
            tableConfig: {
                url: "aliyunslbList",
                method: "get",
                checkbox: true,
                nstable: true,
                // 多选key
                rowkey: "LoadBalancerId",
                thead: [
                    { 
                        title: "实例名称/ID", 
                        key: "InstanceId",
                        render: (text, rowData) => {
                            return (
                                <div onMouseEnter={()=>this.setState({hover: true})} onMouseLeave={()=>this.setState({hover: false})}>
                                    <a href="/#">{rowData.LoadBalancerId}</a>
                                        {this.state.hover ?
                                        <CopyToClipboard 
                                            text={rowData.LoadBalancerId}
                                            onCopy={this.onCopy}>
                                            <CopyOutlined />
                                        </CopyToClipboard> : ''}
                                    <br></br>
                                    {rowData.LoadBalancerName}
                                </div>
                            )
                        }
                    },
                    { 
                        title: "VIP", 
                        key: "Address",
                        render: (text, rowData) => {
                            let type = rowData.AddressType === 'internet' ? '公网IPv4' : '专有网络';
                            return (
                                <div>
                                    <p>{rowData.Address} <span className='text-muted'>({type})</span></p>
                                </div>
                            )
                        }
                    },
                    { 
                        title: "实例配置", 
                        dataIndex: "LoadBalancerSpec",
                        key: "LoadBalancerSpec",
                    },
                    { 
                        title: "地域", 
                        dataIndex: "RegionIdAlias",
                        key: "RegionIdAlias",
                    },
                    { 
                        title: "状态", 
                        dataIndex: "LoadBalancerStatus", 
                        key: "LoadBalancerStatus",
                        render: LoadBalancerStatus => {
                            let color = LoadBalancerStatus === 'active' ? 'geekblue' : 'green';
                            if (LoadBalancerStatus === 'locked') {
                                color = 'red';
                            }
                            return (
                                <Tag color={color} key={LoadBalancerStatus}>
                                {LoadBalancerStatus.toUpperCase()}
                                </Tag>
                            )
                        }
                    },
                    { 
                        title: "计费模式", 
                        key: "PayType",
                        render: (text, rowData) => {
                            return (
                                <div>
                                    {`${rowData.InstanceChargeType}` === 'PrePay' ? '包年包月' : '按量付费'}
                                    <br></br>
                                    {rowData.ExpiredTime} 到期
                                </div>
                            )
                        }
                    },
                    { 
                        title: "管理", 
                        dataIndex: "manage", 
                        key: "manage", 
                        render: (text, rowData) => {
                            return (
                                <div className="inline-button">
                                    <Action>
                                        <Action.Button disabled>
                                            <Link to={{ pathname: '/index/document', state:{ id: rowData.id}}}>详情</Link>
                                        </Action.Button>
                                        <Action.Button disabled>续费</Action.Button>
                                    </Action>
                                </div>
                            )
                        }
                    }
                ],
                thead_item: [
                    { title: "监听名称", dataIndex: "ip", key: "ip" },
                    { title: "前端协议/端口", dataIndex: "instance_id", key: "instance_id" },
                    { title: "后端协议/端口", dataIndex: "instance_name", key: "instance_name" },
                    { title: "运行状态", dataIndex: "eip", key: "eip" },
                    { title: "健康检查状态", dataIndex: "eip", key: "eip" },
                    { title: "服务器组", dataIndex: "eip", key: "eip" },
                ],
                formItem: [
                    {
                        type: "RadioComponent",
                        label: "账号", 
                        url: "relAccountList",
                        method: "get",
                        name: "cur_account",
                        propsKey: {
                            label: "account_name",
                            value: "account_name"
                        },
                        style: { width: "200px" },
                        placeholder: "请选择分类"
                    },
                    { 
                        type: "Input",
                        label: "IP", 
                        name: "Address", 
                        placeholder: "请输入IP"
                    },
                    { 
                        type: "Input",
                        label: "实例ID", 
                        name: "LoadBalancerId", 
                        placeholder: "ID"
                    },
                    { 
                        type: "Input",
                        label: "实例名称", 
                        name: "LoadBalancerName", 
                        placeholder: "名称"
                    }
                ]
            },
            // 表的数据
            data: []
        };
    }
    /** 生命周期挂载完成 */
    componentDidMount(){}

    // 获取子组件实例
    getChildRef = (ref) => {
        this.tableComponent = ref; // 存储子组件
    }

    /** 删除 */
    delete = (id) => {
        this.tableComponent.onHandlerDelete(id)
    }
    
    render(){
        return (
            <Fragment>
                <TableComponent onRef={this.getChildRef} batchButton={true} config={this.state.tableConfig} />
            </Fragment>
        )
    }
}

export default AliyunSlb;